<script setup lang="ts">
import echarts from '@/lib/echarts'
import { onMounted,ref } from 'vue';

onMounted(() => {
    let myChart1 = echarts.init(document.getElementById('charts1')!);
    let myChart2 = echarts.init(document.getElementById('charts2')!);
    let myChart3 = echarts.init(document.getElementById('charts3')!);
    getEcharts1(myChart1,false);
    getEcharts2(myChart2,false);
    getEcharts3(myChart3,false);
    window.addEventListener('resize',()=>{
        getEcharts1(myChart1,true);
        getEcharts2(myChart2,true);
        getEcharts3(myChart3,true);
    },true)
})

const getEcharts1 = (myChart:echarts.ECharts,isResize:boolean) => {
    if (isResize) {
        myChart.resize()

        return;
    }
    console.log('myChart1',isResize)
    const option = {
        legend: {
            orient: 'horizontal',
            left: 10,
            top: 'top',
        },
        grid: {
            // show:true
            // left: 30
            // containLabel :false
        },

        series: [
            {
                data: [13.54, 43.3, 85.8, 93.7],
                type: 'line',
                showSymbol: false,
                name: 'C',
            }, {
                data: [123.53, 83.1, 73.4, 55.1],
                type: 'line',
                showSymbol: false,
                name: 'java',
            }, {
                data: [123.4, 86.4, 65.2, 82.5],
                type: 'line',
                showSymbol: false,
                name: 'python',
            }, {
                data: [155.3, 72.4, 53.9, 39.1],
                type: 'line',
                showSymbol: false,
                name: 'go',
            }
        ],
        xAxis: {
            type: 'category',
            data: ["2022", "2019", "2018", "2017"]
        },
        yAxis: {
            type: "value",
            name: '名次'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            backgroundColor: 'rgba(50,50,50,0.7)',
            textStyle: {
                color: "#fff",
                fontStyle: "oblique",
                align: 'left'
            }
        },
    };
    myChart.setOption(option);
}
const getEcharts2 = (myChart:any,isResize:boolean) => {
    if (isResize) {
        myChart.resize()
        return;
    }
    let option = {
        title: {
            text: 'xxxxxxxxxx',
            textStyle: {
                color: '#333'
            },
            left: 'center',
            top: 10
        },
        legend: {
            orient: 'horizontal',
            left: 'center',
            top: 40,
        },
        grid: {
            // show:true
            top: 100
            // containLabel :false
        },
        series: [
            {
                data: [13.54, 43.3, 85.8, 93.7, 11, 2, 3],
                itemStyle: {
                    color: '#000',
                    borderWidth: '33'
                },
                emphasis: {
                    focus: "series"
                },
                type: 'bar',
                showSymbol: false,
                stack: 'total',
                name: '吃饭',
            }, {
                data: [123.53, 83.1, 73.4, 55.1, 24, 2],
                type: 'bar',
                showSymbol: false,
                stack: 'total',
                name: '睡觉',
                emphasis: {
                    focus: "series"
                },
            }, {
                data: [123.4, 86.4, 65.2, 82.5],
                type: 'bar',
                showSymbol: false,
                stack: 'total',
                name: '工作',
                emphasis: {
                    focus: "series"
                },
            }, {
                data: [155.3, 72.4, 53.9, 39.1, 53, 43],
                type: 'bar',
                showSymbol: false,
                stack: 'total',
                name: '喝水',
                emphasis: {
                    focus: "series"
                },
            }, {
                data: [155.3, 72.4, 53.9, 39.1, 32, 1, 4],
                type: 'bar',
                showSymbol: false,
                stack: 'total',
                name: '饮茶',
                emphasis: {
                    focus: "series"
                },
            }
        ],
        xAxis: {
            type: 'category',
            data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
        },
        yAxis: {
            type: "value",
            name: '名次'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
    };
    myChart.setOption(option);
}
const getEcharts3 = (myChart:any,isResize:boolean) => {
    if (isResize) {
        myChart.resize() //resize
        return;
    }
    let option = {
        legend: {
            orient: 'horizontal',
            top: 'auto',
        },
        grid: {
            // show:true
            // left: 30
            // containLabel :false
        },
        series: [
            {
                data: [13.54, 43.3, 85.8, 93.7, 11, 2, 3],
                itemStyle: {
                    color: '#333',
                    borderWidth: '33'
                },
                emphasis: {
                    // focus:"series"
                },
                type: 'bar',
                showSymbol: false,
                name: '吃饭',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }, {
                data: [123.53, 83.1, 73.4, 55.1, 24, 2],
                type: 'line',
                // showSymbol: false,
                name: '睡觉',
                emphasis: {
                    // focus:"series"
                },
            }
        ],
        xAxis: {
            type: 'category',
            data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
        },
        yAxis: {
            type: "value",
            name: '名次'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
    };
    myChart.setOption(option);
}

</script>
<script lang="ts">
export default {
    name: 'page3_1'
}
</script>

<template>
    <div class="wrapper">
        <div class="table" id="charts1" ref="charts1">
            图表加载中
        </div>
        <div class="table" id="charts2">
            图表加载中
        </div>
        <div class="table" id="charts3">
            图表加载中
        </div>
    </div>
</template>

<style scoped>
.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.table {
    width: 48%;
    height: 500px;
    border: 1px solid black;
    display: flex;
    align: center;
    justify-content: center;
}
</style>
